<template>
	<div class="dialog-form page">
		<div class="base-container">
			<p class="title">基本信息</p>
			<el-form :model="info" label-position="left">
				<el-row :gutter="36">
					<el-col :span="8">
						<el-form-item label="码方案：">{{ info.codeName }}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="码方案code：">{{ info.codeLabel }}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="码类别：">
							<dict-tag :options="bus_qr_code_type" :value="info.codeType" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="码标准：">
							<dict-tag :options="bus_qr_code_standard" :value="info.codeStandard" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<el-form ref="configForm" :model="form" :rules="rules" label-position="top">
			<div class="base-container mt-10px">
				<p class="title">公钥证书</p>
				<div class="flex items-center mb-8px">
					<span class="prefix">*</span>
					<el-tooltip
						content="可以选择在公钥证书管理中，申请好的公钥证书，选项如：000001、000002"
						placement="top-start">
						<el-icon :size="12" color="#8E8E8E">
							<QuestionFilled />
						</el-icon>
					</el-tooltip>
					<p class="sub-title">公钥证书</p>
				</div>
				<el-form-item label="" prop="caId">
					<el-select v-model="form.caId" placeholder="请选择">
						<el-option 
              v-for="dict in caList" 
              :key="dict.id" 
              :label="dict.requestNum" 
              :value="dict.id" 
              :disabled="dict.enabled != 3"
            />
					</el-select>
				</el-form-item>
			</div>
		</el-form>

		<div class="dialog-footer">
			<el-button @click="onCancel">取消</el-button>
			<el-button type="primary" @click="onConfirm">确认</el-button>
		</div>
	</div>
</template>

<script setup>
import {
	getPlatCodeManagement,
  updatePlatCodeManagement
} from '@/api/bus/PlatCodeManagement'
import { getCaList } from '@/api/bus/certificateManagement'

const { proxy } = getCurrentInstance()
const { bus_qr_code_type, bus_qr_code_standard } = proxy.useDict('bus_qr_code_type', 'bus_qr_code_standard')

const emits = defineEmits(['cancel', 'confirm'])

const configForm = ref()
const info = ref({})
const caList = ref([])
const form = ref({
	id: null,
  caId: null
})
const rules = {
	caId: [{ required: true, message: '请选择公钥证书' }]
}

const pageInit = (id) => {
	getPlatCodeManagement(id).then((response) => {
		info.value = response.data
    form.value = {
      id: id,
      caId: response.data.caId
    }
	})
	getCaList().then((response) => {
		caList.value = response.data || []
	})
}

const onCancel = () => {
	emits('cancel')
}

const onConfirm = () => {
	configForm.value.validate((valid) => {
		if (valid) {
			updatePlatCodeManagement(form.value).then((res) => {
				if (res.code == 200) {
					proxy.$modal.msgSuccess('配置成功')
					emits('confirm')
				} else {
					proxy.$modal.msgError(res.msg)
				}
			})
		}
	})
}

defineExpose({
	pageInit
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.page {
	background-color: $main-bg-color;
	margin: -20px -16px;
	padding: 10px 10px 0;
}

.title {
	color: rgb(31, 31, 31);
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px dashed rgb(225, 225, 225);
}

.sub-title {
	color: rgb(75, 75, 75);
	font-size: 14px;
}

.prefix {
	color: #f56c6c;
	font-size: 12px;
	margin-right: 5px;
}

.dialog-footer {
	margin-left: -10px;
	margin-right: -10px;
	background-color: #fff;
}
</style>
